<template>
  <!--教育者修改课程展示页信息的课程信息修改页-->
  <div>
    <!--第一个内容栏-->
    <div style="margin:auto;display: flex;background-color: white">
      <div class="course-d1">
        <p style="width: 1200px;margin: 20px 0 15px 10px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ course.fathertypeName }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ course.coursetypeName }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ course.courseName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </p>
        <div style="display: flex;">
          <img :src="`http://localhost:8089/upload/${course.cover}`"
               style="width: 510px;height: 288px;border-radius: 18px;"/>
          <div>
            <div style="width: 700px;">
              <a style="font-weight: bold;font-size:24px;margin:0 0 0 30px">{{ course.courseName }}</a>
<!--              <a style="float: right;margin-right: 15px">xxxx</a>-->
            </div>
            <div
                style="display:flex;flex-direction: column;width: 700px;height: 132px;margin:20px 0 0 30px;border-radius: 18px;background-color: #F8F9FB">
              <div style="margin:30px 0 0 20px;color: #999999">创建时间：{{ course.createTime|formatDate('yyyy年MM月dd日') }}</div>
              <div style="margin:10px 0 0 20px;color: #999999">最近更新：{{ course.updateTime|formatDate('yyyy年MM月dd日') }}</div>
              <div style="margin: 20px 20px 0;text-align:right;color: #999999;font-size: 14px">
                已有{{ course.attendNum }}人参加
              </div>
            </div>
            <el-button type="primary" @click="onCourseEdit"
                       style="margin:20px 0 0 30px;border-radius: 24px;font-size: 18px;width: 192px;height: 48px">编辑课程详细
            </el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="onCourseDelete"
                       style="margin:20px 0 0 30px;border-radius: 24px;font-size: 18px;width: 48px;height: 48px">
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--第二个内容栏-->
    <div style="margin:auto;width: 1200px;">
      <div style="display: flex;margin: 20px 0;">
        <!--课程信息的标签页-->
        <el-tabs class="course-tabs" v-model="activeName" @tab-click="handleClick">
          <!--课程详细页-->
          <el-tab-pane label="课程详细" name="first">
            <!--修改课程详细的表单-->
            <el-form v-model="course">
              <el-form-item label="封面" prop="cover">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8089/uploadFile"
                    :show-file-list="false"
                    :on-success="afterFileUpload"
                >
                  <img v-if='course.cover!=null' :src='`http://localhost:8089/upload/${course.cover}`'
                       class="cover"/>
                  <div v-else style="height: 150px;width: 280px;border: 2px solid #999999">
                    <div class="el-icon-picture-outline"
                         style="margin-top: 45px;font-size: 48px;text-align: center;"></div>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="课程名" prop="courseName">
                <el-input v-model="course.courseName" placeholder="给课程起个名字"></el-input>
              </el-form-item>
              <div style="display: flex;">
                <el-form-item label="课程类型" style="width: 65%">
                  <el-select v-model="fathertypeId" placeholder="请选择课程大类">
                    <el-option @click.native="onClickFatherType" v-for="(item,index) in fathertypeList"
                               :key="item.fathertypeId" :label="item.fathertypeName"
                               :value="item.fathertypeId"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="coursetypeId" style="width: 50%;margin: 0" label-width="20px">
                  <el-select v-model="coursetypeId" placeholder="请选择课程类型">
                    <el-option v-for="(item,index) in coursetypeList"
                               v-if="item.fathertypeId===fathertypeId"
                               :key="item.coursetypeId" :label="item.coursetypeName"
                               :value="item.coursetypeId"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <p class="course-p">课程概述</p>
              <el-form-item prop="synopsis">
                <el-input type="textarea" :autosize="{ minRows: 7}" placeholder="介绍一下这门课吧"
                          v-model="course.synopsis"></el-input>
              </el-form-item>
              <p class="course-p">预备知识</p>
              <el-form-item prop="prerequisites">
                <el-input type="textarea" :autosize="{ minRows: 7}" placeholder="介绍一下这门课吧"
                          v-model="course.prerequisites"></el-input>
              </el-form-item>
              <p class="course-p">参考资料</p>
              <el-form-item prop="reference">
                <el-input type="textarea" :autosize="{ minRows: 7}" placeholder="介绍一下这门课吧"
                          v-model="course.reference"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateCourse" style="float: right">修 改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!--课程评价页，课程评价教育者无法进行修改-->
          <el-tab-pane label="课程评价" name="second">
            <div style="display: flex;width: 350px;height: 70px;margin-top: 20px">
              <a style="font-size: 45px;color: #ff9900">{{ course.score }}</a>
              <div style="margin: 7px 0 0 10px">
                <el-rate
                    v-model="course.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="">
                </el-rate>
                <p style="margin:10px 0 0 10px;font-size:12px;color: #999999">共{{ appraiseList.length }}条评价</p>
              </div>
            </div>
            <div style="display: flex;margin-top: 20px" v-for="(item,index) in appraiseList" :key="index"
                 :offset="index > 0 ? 2 : 0">
              <img :src="`http://localhost:8089/upload/${item.avatar}`"
                   style="border-radius: 50%;width: 40px;height: 40px">
              <el-col style="margin-left:20px;">
                <div style="display:flex;margin: 0 0;font-size: 15px;color: #333354;">
                  <a>{{ item.userName }}</a>
                  <div style="margin-left: 10px">
                    <el-rate
                        class="rete"
                        v-model="item.score"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="">
                    </el-rate>
                  </div>
                </div>
                <p style="margin:5px 0;width:760px;font-size:17px;color:#666666;">
                  {{ item.comment }}
                </p>
                <p style="margin:0;font-size: 15px;color: #999999">
                  发表于{{ item.createTime|formatDate('yyyy-MM-dd HH:mm:ss') }}
                </p>
              </el-col>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div style="display: flex;flex-direction: column;">
          <div
              style="width: 295px;margin-left:20px;padding-top: 20px;height:300px;background-color:white;border-radius: 12px;">
            <div style="width: 235px;height: 103px;margin: 0 30px;">
              <img :src="`http://localhost:8089/upload/${course.brand}`" style="width: 200px;margin:10px 0 0 15px"/>
              <el-divider></el-divider>
            </div>
            <div style="display: flex;padding:20px 0 0 20px;">
              <div style="width:8px;height:28px;background-color: #409EFF;"></div>
              <a style="margin-left: 20px;font-size: 20px">授课老师</a>
            </div>
            <div @click="onTeacher(course.userId)" style="display: flex;margin: 10px 20px;cursor:pointer">
              <img :src="`http://localhost:8089/upload/${course.avatar}`" style="width: 60px;border-radius:50%;margin:10px 0 0 15px"/>
              <div style="margin: 10px 20px">
                <a @click="" style="font-size: 24px;margin: 0">
                  {{ course.userName }}
                </a>
                <p style="margin: 0">
                  <a v-if="course.identitytypeId===1">学生</a>
                  <a v-else-if="course.identitytypeId===2">在职</a>
                  <a v-else>其他</a>
                </p>
              </div>
            </div>
          </div>
          <div
              style="width: 295px;margin-left:20px;height:500px;background-color:white;border-radius: 12px;margin-top:20px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "CourseHomeEditView",
  data() {
    return {
      courseId: '',
      course: {},
      coursetypeId: '',
      fathertypeId: '',
      attendFlag: false,
      activeName: 'first',
      fathertypeList: [],
      coursetypeList: [],
      appraiseList: []
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 修改课程信息
    updateCourse() {
      this.$axios({
        method: 'post',
        url: `http://localhost:8089/user/course/updateCourse`,
        data: {
          "courseId": this.course.courseId, "courseName": this.course.courseName, "coursetypeId": this.coursetypeId,
          "schoolId": this.course.schoolId, "synopsis": this.course.synopsis, "cover": this.course.cover,
          "prerequisites": this.course.prerequisites, "reference": this.course.reference,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("修改课程成功");
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(err => console.log(err));
    },
    // 查询所有课程大类
    getFatherTypeAll() {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/fathertype/findAll`
      }).then(res => {
        if (res.data.code === 200)
          this.fathertypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 查询所有课程分类
    getCoursetypeAll() {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/coursetype/findAll`
      }).then(res => {
        if (res.data.code === 200)
          this.coursetypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 使用课程Id查询本页面课程的信息
    getCourseById(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/selectCourseById/${courseId}`
      }).then(res => {
        if (res.data.code === 200) {
          this.course = res.data.dataobject;
          this.fathertypeId = parseInt(res.data.dataobject.fathertypeId);
          this.coursetypeId = parseInt(res.data.dataobject.coursetypeId)
        }
      }).catch(err => console.log(err));
    },
    // 课程Id查询关于本课程的评价
    getAppraiseListByCourseId(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/appraise/selectAppraiseByCourseId/${courseId}`
      }).then(res => {
        this.appraiseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    deleteCourse(courseId){
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/user/course/deleteCourse/${courseId}`
      }).then(res => {
        this.$router.push({path:'/courseEditList'})
        this.$message.success('删除课程成功')
      }).catch(err => console.log(err));
    },
    //文件上传前
    beforeAvatarUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isImage) {
        this.$message.error('上传图片只能是JPG、png、Webp格式！');
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过10MB!');
      }
      return isImage && isLt10M;
    },
    //文件上传之后
    afterFileUpload(response, file) {
      console.log(response);
      this.course.cover = response.dataobject;
    },
    // 进入课程学习页面的设置页
    onCourseEdit() {
      this.$router.push({path: '/learnEdit/announceEdit/' + this.courseId})
    },
    onCourseDelete(){
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCourse(this.courseId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // getIfAttend(courseId) {
    //   this.$axios({
    //     method: 'post',
    //     url: "http://localhost:8089/user/attendCourse/selectAttendCourse",
    //     data: {"userId": localStorage.getItem('userId'), "courseId": courseId}
    //   }).then(res => {
    //     this.attendFlag = res.data.code === 200;
    //   }).catch(err => console.log(err));
    // },
    // inLearn() {
    //   this.$axios({
    //     method: 'post',
    //     url: "http://localhost:8089/user/attendCourse/updateAttendCourse",
    //     data: {"userId": localStorage.getItem('userId'), "courseId": this.courseId}
    //   }).then(res => {
    //     this.$router.push({path: '/learn/announce/' + this.courseId});
    //   }).catch(err => console.log(err));
    // },
    // 查询参与本课程的人数
    addAttendNum(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/addAttendNum/${courseId}`
      }).then(res => {
        if (res.data.code === 200) {
          setTimeout(() =>
                  this.$router.go(0)
              , 300)
        }
      }).catch(err => console.log(err));
    },
    onClickFatherType() {
      this.coursetypeId = '';
    },
    onTeacher(userId){
      this.$router.push({path:"/userHome/"+userId})
    }
  },
  filters:{
    formatDate: function(value,args) {
      var dt = new Date(value);
      if(args == 'yyyy年MM月dd日') {// yyyy年MM月dd日
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        return `${year}年${month}月${date}日`;
      } else if(args == 'yyyy-MM-dd HH:mm:ss'){// yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        let hour = dt.getHours().toString().padStart(2,'0');
        let minute = dt.getMinutes().toString().padStart(2,'0');
        let second = dt.getSeconds().toString().padStart(2,'0');
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      }
    }
  },
  created() {
    this.courseId = this.$route.params.courseId;
    // if (localStorage.getItem('userId') != null)
    //   this.getIfAttend(this.courseId)
    this.getCourseById(this.courseId);
    this.getFatherTypeAll();
    this.getCoursetypeAll();
    this.getAppraiseListByCourseId(this.courseId);
  },
  mounted() {

  }
}
</script>

<style scoped>
@import "../css/course.css";

/deep/ .el-tabs__item {
  font-size: 18px !important;
}

/deep/ .el-rate__icon {
  font-size: 30px;
}

.rete /deep/ .el-rate__icon {
  font-size: 20px;
  margin-right: 0;
}

.cover {
  height: 200px;
}
</style>